<template>
    <a-input-search v-model:value="state.userSearchVal" style="margin-bottom: 8px" placeholder="请输入" />
    <template v-for="dept in props.orgUserData" :key="dept.id">
        <user-item :dept="dept" v-model:checked-nodes="state.checkedNodes" :onUserChange="onUserChange"/>
    </template>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import userItem from './userItem.vue';

const props = withDefaults(defineProps<{
    orgUserData:any[],
}>(),{})

const emits = defineEmits<{
    (e:'change',data:any[]):void
}>()

const state = reactive({
    userSearchVal:"",
    checkedNodes:[] as any[], //接收递归子组件中选中的列表
})

const onUserChange = (data:any)=>{
    const index = state.checkedNodes.findIndex((item:any) => item.id === data.id)
    if(data.checked && index == -1){
        state.checkedNodes.push(data)
    }else{
        if(index != -1){
            state.checkedNodes.splice(index, 1)
        }
    }
    const res  = state.checkedNodes.map((item:any)=>{
        return {
            id:item.id,
            name:item.realName,
            type:"user"
        }    
    })
    emits('change',res)
}

</script>

<style lang='scss' scoped></style>